import React from "react";
import { apiGetData } from '@/request/home'
import '@/views/index/style/style.less'
import '@/font/iconfont.css'
import Card from "@/views/dataStatics/StatsCard";
import Income from '@/views/dataStatics/Income'
import Registered from '@/views/dataStatics/Registered'
import { Col, Row } from 'antd';
import _ from 'lodash'


class Index extends React.Component {
    state = {
        dataSource: [],
        goodsTop:[],
        serviceTop:[],
    }
    async componentDidMount() {
        await this.getData()
        await this.getGoodsTop()
        await this.getServiceTop()
    }

    getData = async () => {
        let res = await apiGetData()
        if (res.data && res.code === 0) {
            let data = res.data
            let dataSource = [
                {
                    top:[
                        {
                            title: '用户总数',
                            value: data.allMemberCount>10000?(data.allMemberCount/10000).toFixed(2)+"万" :data.allMemberCount || 0
                        },
                    ],
                    bottom:[
                        {},
                        {
                            title: '今日新增',
                            value: data.todayNewMemberCount>10000?(data.todayNewMemberCount/10000).toFixed(2)+"万" :data.todayNewMemberCount || 0
                        },
                    ]
                },
                {
                    top:[
                        {
                            title: '订单总数',
                            value: data.allOrderCount>10000?(data.allOrderCount/10000).toFixed(2)+"万" :data.allOrderCount || 0
                        },
                    ],
                    bottom:[
                        {
                            title: '电商',
                            value: data.onLineAllOrderCount>10000?(data.onLineAllOrderCount/10000).toFixed(2)+"万" :data.onLineAllOrderCount  || 0 
                        },
                        {
                            title: '同城',
                            value: data.tcpsOrderCount>10000?(data.tcpsOrderCount/10000).toFixed(2)+"万" :data.tcpsOrderCount || 0
                        },
                        {
                            title: '自提',
                            value: data.ddztOrderCount>10000?(data.ddztOrderCount/10000).toFixed(2)+"万" :data.ddztOrderCount || 0
                        },
                        {
                            title: '服务',
                            value: data.fwOrderCount>10000?(data.fwOrderCount/10000).toFixed(2)+"万" :data.fwOrderCount || 0
                        },
                        {
                            title: '收银台',
                            value: data.sytOrderCount>10000?(data.sytOrderCount/10000).toFixed(2)+"万" :data.sytOrderCount || 0
                        },
                    ]
                },
                {
                    top:[
                        {
                            title: 'APP总营业额',
                            value: data.appAllPrice>1000000?(data.appAllPrice/1000000).toFixed(2)+"万" :<React.$Price price={data.appAllPrice || 0} />
                        },
                    ],
                    bottom:[
                        {
                            title: '电商',
                            value: data.shopOrderPayPrice>1000000?(data.shopOrderPayPrice/1000000).toFixed(2)+"万" :<React.$Price price={data.shopOrderPayPrice || 0} />
                        },
                        {
                            title: '同城',
                            value: data.tcpsSumPrice>1000000?(data.tcpsSumPrice/1000000).toFixed(2)+"万" :<React.$Price price={data.tcpsSumPrice || 0} />
                        },
                        {
                            title: '自提',
                            value: data.ddztSumPrice>1000000?(data.ddztSumPrice/1000000).toFixed(2)+"万" :<React.$Price price={data.ddztSumPrice || 0} />
                        },
                        {
                            title: '服务',
                            value: data.appfwSumPrice>1000000?(data.appfwSumPrice/1000000).toFixed(2)+"万" :<React.$Price price={data.appfwSumPrice || 0} /> 
                        },
                    ]
                },
                {
                    top:[
                        {
                            title: '门店总营业额',
                            value: data.offLineSumPrice>1000000?(data.offLineSumPrice/1000000).toFixed(2)+"万" :<React.$Price price={data.offLineSumPrice || 0} />
                        },
                    ],
                    bottom:[
                        {},
                        {
                            title: '门店今日营业额',
                            value: data.todayOffLineSumPrice>1000000?(data.todayOffLineSumPrice/1000000).toFixed(2)+"万" :<React.$Price price={data.todayOffLineSumPrice || 0} />
                        },   
                    ]
                },
            ]
            this.setState({ dataSource })
        } 
    }

    getGoodsTop = async() =>{
        let res = await React.$post("/admin/goodsInfo/findGoodsPageBySales",{pageNo:1,pageSize:10})
        if(res.code === 0 && res.data){
            this.setState({
                goodsTop:res.data
            })
            console.log(res.data)
        }
    }

    getServiceTop = async () =>{
        let res = await React.$post("/admin/storeService/findServicePageByOrderCount",{pageNo:1,pageSize:10})
        if(res.code === 0){
            this.setState({
                serviceTop:res.data
            })
            console.log(res.data)
        }
    }

    render() {
        const { dataSource,goodsTop, serviceTop } = this.state
        return <div className={"p-layout-box configuration"}>
            <div className="card-box">
                {
                    dataSource.map((v, i) => {
                        return <Card key={i} top={v.top} bottom={v.bottom} />
                    })
                }
            </div>
            <div style={{ marginTop: 30, fontWeight: 600 }}>平台收入</div>
            <Income style={{ overflow: 'hidden' }} height={'500px'} width={'100%'} />
            <div style={{ marginTop: 30, fontWeight: 600 }}>平台用户</div>
            <Registered style={{ overflow: 'hidden' }} height={'500px'} width={'100%'} />
            <div style={{width:'90%',margin:'auto'}}>
                <Row gutter={[32, 16]}>
                    <Col span={12} > </Col>
                    <Col span={12} > </Col>
                    <Col span={12} >
                        <div className="card-count">
                            <div className="card-count-title" >商品TOP10</div>
                            <ul >
                                {
                                    goodsTop.map((v,i)=>{
                                        return <li>{v.goodsName}</li>
                                    })
                                }
                            </ul>
                        </div>
                    </Col>
                    <Col span={12} >
                        <div className="card-count">
                            <div className="card-count-title">服务TOP10</div>
                            <ul>
                                {
                                    serviceTop.map((v,i) => {
                                        return <li>{v.serviceName}</li>
                                    })
                                }
                            </ul>
                        </div>
                    </Col>
                </Row>
            </div>

        </div>
    }
}

export default Index;
